@{
    ViewData["Title"] = "API测试";
}

<h2>生产计划明细API测试</h2>

<div>
    <label>计划ID:</label>
    <input type="number" id="planId" value="1" min="1" max="10">
    <button onclick="testApi()">测试API</button>
</div>

<div style="margin-top: 20px;">
    <h3>API响应:</h3>
    <pre id="apiResponse" style="background: #f5f5f5; padding: 10px; border-radius: 4px; overflow: auto;"></pre>
</div>

<div style="margin-top: 20px;">
    <h3>解析后的数据:</h3>
    <div id="parsedData"></div>
</div>

<script>
async function testApi() {
    const planId = document.getElementById('planId').value;
    const responseDiv = document.getElementById('apiResponse');
    const parsedDiv = document.getElementById('parsedData');
    
    try {
        // 清空之前的结果
        responseDiv.textContent = '正在加载...';
        parsedDiv.innerHTML = '';
        
        // 调用MVC控制器的方法
        const response = await fetch(`/Plan/GetPlanItems?planId=${planId}`);
        const result = await response.json();
        
        // 显示原始响应
        responseDiv.textContent = JSON.stringify(result, null, 2);
        
        // 解析并显示数据
        if (result.success && result.data) {
            let html = '<table border="1" style="border-collapse: collapse; width: 100%;">';
            html += '<tr><th>ID</th><th>计划ID</th><th>产品编码</th><th>产品名称</th><th>规格</th><th>数量</th><th>完成数</th></tr>';
            
            result.data.forEach(item => {
                html += `<tr>
                    <td>${item.id || 'N/A'}</td>
                    <td>${item.planId || 'N/A'}</td>
                    <td>${item.productCode || 'N/A'}</td>
                    <td>${item.productName || 'N/A'}</td>
                    <td>${item.spec || 'N/A'}</td>
                    <td>${item.quantity || 'N/A'}</td>
                    <td>${item.doneQuantity || 'N/A'}</td>
                </tr>`;
            });
            
            html += '</table>';
            parsedDiv.innerHTML = html;
        } else {
            parsedDiv.innerHTML = `<p style="color: red;">错误: ${result.message || '未知错误'}</p>`;
        }
        
    } catch (error) {
        responseDiv.textContent = `请求失败: ${error.message}`;
        parsedDiv.innerHTML = `<p style="color: red;">网络错误: ${error.message}</p>`;
    }
}

// 页面加载时自动测试
document.addEventListener('DOMContentLoaded', function() {
    testApi();
});
</script> 